<template>
	<div class="each_day shadow">
		<div class="title_bar">
			<p>7日天气预报</p>
			<a> 15日天气预报 </a>
		</div>
		<ul class="info_container">
			<li class="each_info" v-for="(item,index) in daily" :key="index" >
				<div class="info_title">{{item.day}}</div>
				<div class="info_date">{{item.date[0]+"月"+item.date[1]+"日"}}</div>
				<div class="max status">
					<div class="status_title">{{item.textDay}}</div>
					<img class="status_icon" v-bind:src= "img_url + item.iconDay + '.png'"/>
					<div class="status_temp">{{item.tempMax}}°</div>
				</div>
				<div class="min status">
					<div class="status_temp">{{item.tempMin}}°</div>
					<img class="status_icon" v-bind:src= "img_url + item.iconNight + '.png'"/>
					<div class="status_title">{{item.textNight}}</div>
				</div>
				<div class="wind">{{item.windDirDay}} {{item.windDirDay=="无持续风向"?"":item.windScaleDay+"级"}}</div>
			</li>
		</ul>
		<EachDayChart :temp_list="TempList"></EachDayChart>
		<!-- <canvas></canvas> -->
	</div>
</template>

<script>
	import EachDayChart from "./EachDayChart.vue"
	
	export default {
		data: function () {
			return {
				daily: [],
				TempList: {},
				todyData: {}
			}
		},
		props: {
			lc_name: String
		},
		components: {
			EachDayChart
		},
		computed: {
			img_url: function(){
				return process.env.BASE_URL + "WeatherIcon/weather-icon-S1/color-64/"
			},
			city_id: function() {
				return this.$store.state.cityId
			}
		},
		watch: {
			// 当city_id变化时请求新数据
			city_id () {
				let url = 'https://devapi.heweather.net/v7/weather/7d?key=4f1744b1ba5b47ab8b0a893374efa8ca&location=' + this.city_id;
				this.$axios
					.get(url)
					.then(res => {
						// 将相应中的数据保存到组件的data中
						this.daily = res.data.daily;
						// 调用dayfy函数将返回数据中的日期转化为今明后或者星期几
						this.dayfy(this.daily);
						// 调用setTodayData函数，将今天的天气信息单独保存出来并将其传递给App.vue
						// App.vue收到数据后将其传递给UserLocation，再传递给StarCity
						// 解决方案二：使用兄弟组件间通信
						this.setTodayData(this)
						// 调用函数，将每天的最高温最低温数据存入一个数组，以便传递给绘图组件进行折线图绘制
						this.setTempList(this);
					})
			}
		},
		methods: {
			setTempList: function (that) {
				// 遍历数据，分别将每天的最高温最低温数据存入数组
				// 再将两个数组存入一个对象
				let maxTemp = [];
				let minTemp = [];
				for (let i = 0; i <= that.daily.length-1; i++) {
					maxTemp.push(that.daily[i].tempMax);
					minTemp.push(that.daily[i].tempMin);
				}
				that.TempList = {
					maxList: maxTemp,
					minList: minTemp
				};
			},
			setTodayData: function () {
				this.todyData = {
					id: this.$store.state.cityId,
					name: this.$props.lc_name,
					icon: this.daily[0].iconDay,
					textDay: this.daily[0].textDay,
					textNight: this.daily[0].textNight,
					tempMin: this.daily[0].tempMin,
					tempMax: this.daily[0].tempMax
				}
				this.$emit('getTodaytData',this.todyData);
			},
			dayfy: function (daily) {
				// 创建用于分割日期的正则，2020-08-03 匹配两位数字和两位数字之间有-连接的片段，且是字符串的结尾
				let reg = /\d\d-\d\d$/;
				// 创建时间字符串数组，用于将日期转换为周几或者今明后天
				let dayList = ["周日","周一","周二","周三","周四","周五","周六","今天","明天","后天"];
				// 遍历存放每天数据的daily数组
				for(let i = 0; i <= daily.length-1; i++) {
					// 将日期分割成月和日存在一个数组中
					daily[i].date =  daily[i].fxDate.match(reg)[0].split("-");
					// 判断下标是否小于2，若小于2则说明可以用今明后表示
					if (i <= 2){
						daily[i].day = dayList[i+7];
					} else {
						// 若大于2，则用周几表示
						let d = new Date(daily[i].fxDate);
						daily[i].day = dayList[d.getDay()];
					}
				}
			}
		},
	}
</script>

<style lang="less">
	.each_day {
		position: relative;
		float: left;
		width: 740px;
		height: 513px;
		margin: 40px 0;
		padding: 25px;
		background-color: #fff;
		border-radius: 10px;
		box-sizing: border-box;
		.title_bar {
			position: relative;
			margin-bottom: 13px;
			p {
				font-size: 18px;
				color: #333;
			}
			a {
				position: absolute;
				right: 5px;
				top: 0px;
				height: 24px;
				width: 100px;
				line-height: 24px;
				font-size: 12px;
				text-align: center;
				color: #555;
				border: 1px solid #dce5f0;
				border-radius: 18px;
				background-color: #f8faff;
			}
		}
		.info_container {
			display: flex;
			width: 690px;
			margin: 0;
			justify-content: space-between;
			.each_info {
				text-align: center;
				padding: 5px;
				font-size: 14px;
				color: #555;
				.info_title {
					margin-bottom: 8px;
				}
				.info_date {
					margin-bottom: 16px;
					font-size: 12px;
					color: #aaa;
				}
				.status {
					.status_temp {
						font-size: 18px;
					}
					.status_icon {
						width: 36px;
						height: 36px;
					}
				}
				.max {
					margin-bottom: 116px;
					.status_icon {
						margin: 20px 0 5px;
					}
				}
				.min {
					.status_icon {
						margin: 5px 0 20px;
					}
				}
				.wind {
					font-size: 12px;
					margin-top: 20px;
				}
			}
		}
		#chart {
			position: absolute;
			top: 235px;
			left: 46px;
			width: 640px;
			height: 105px;
			background-color: transparent;
		}
	}
</style>